<template>
	<view class="edit-page" v-if="info.background_image" :style="{ backgroundImage: `url(${'https://m.lqvvvv.com'+info.background_image})` }">
		<u-navbar :autoBack="true" title="个人中心" :placeholder="true" bgColor="rgba(255,255,255,0)">
		</u-navbar>
		<view style="height: 270rpx;"></view>
		<view class="content">
			<view class="head">
				<image :src="'https://m.lqvvvv.com'+info.avatar||'https://m.lqvvvv.com/assets/static/my/head.png'"
					mode=""></image>
			</view>
			<view class="edit">
				<view></view>
				<view v-if="isshow == 0" class="edit-btn" @click="$navTo.togo('/pages/my/edit-info/index')">
					<view class="edit-text">
						编辑资料
					</view>
				</view>
			</view>
			<view class="head-name">
				<view class="name">
					{{info.nickname}}
				</view>
				<image v-if="info.level == 1" src="https://m.lqvvvv.com/assets/static/index/grade1.png" mode=""></image>
				<image v-if="info.level == 2" src="https://m.lqvvvv.com/assets/static/index/grade2.png" mode=""></image>
				<image v-if="info.level == 3" src="https://m.lqvvvv.com/assets/static/index/grade3.png" mode=""></image>
			</view>
			<view class="add-blurb">
				{{info.intro}}
			</view>
			<!-- <view class="info-num">
				<view class="num-item">
					10 <text>获赞</text>
				</view>
				<view class="num-item">
					0 <text>关注</text>
				</view>
				<view class="num-item">
					0 <text>粉丝</text>
				</view>
			</view> -->
			<u-tabs v-if="isshow == 0" :itemStyle="{width:'33%',height:'110rpx'}" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle"
				lineHeight="4" lineWidth="30" :list="list"
				lineColor="linear-gradient( 274deg, #CC7BFF 0%, #5755F2 100%)" @click="tabHandle"></u-tabs>
			<view class="line"></view>
			<view class="video" v-show="tabIndex == 0">
				<u-empty mode="car" v-if="info.videos == ''" icon="https://m.lqvvvv.com/assets/static/my/none.png"
					text="暂无内容" marginTop="30">
				</u-empty>
				<video style="width: 100%; margin-top: 20rpx;" v-else :src="'https://m.lqvvvv.com'+info.videos"></video>
			</view>
			<!-- <view class="dynamic" v-show="tabIndex == 1">
				<view class="addition">
					<image src="https://m.lqvvvv.com/assets/static/my/addition.png" mode=""></image>
				</view>
				<view class="dynamic-item">
					<view class="dynamic-top">
						<view class="top-left">
							<view class="top-head">
								<image src="https://m.lqvvvv.com/assets/static/my/head.png" mode=""></image>
							</view>
							<view class="top-info">
								<view class="info-name">
									<view class="name">
										闪闪的向日葵
									</view>
									<view class="age">
										<image src="https://m.lqvvvv.com/assets/static/index/maleb.png" mode=""></image>
										<view>
											20
										</view>
									</view>
								</view>
								<view class="time">
									07-11 19:28
								</view>
							</view>
						</view>
						<image src="https://m.lqvvvv.com/assets/static/my/more.png" mode=""></image>
					</view>
					<view class="dynamic-msg">
						<view class="msg-text">
							你喜欢的样子，我都有
						</view>
						<view class="msg-img">
							<image src="https://m.lqvvvv.com/assets/static/logo.png" mode=""></image>
						</view>
					</view>
					<view class="place">
						<image src="https://m.lqvvvv.com/assets/static/my/place.png" mode=""></image>
						<view>
							青岛市
						</view>
					</view>
					<view class="dynamic-use">
						<image src="https://m.lqvvvv.com/assets/static/my/forward.png" mode=""></image>
						<view class="user-right">
							<view class="user-item">
								<image src="https://m.lqvvvv.com/assets/static/my/heart0.png" mode=""></image>
								<view>
									11
								</view>
							</view>
							<view class="user-item">
								<image src="https://m.lqvvvv.com/assets/static/my/comment.png" mode=""></image>
								<view>
									14
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="none">
					<u-empty mode="car" icon="https://m.lqvvvv.com/assets/static/my/none.png" text="暂无内容" marginTop="30">
					</u-empty>
				</view>
			</view> -->
			<view class="album" v-show="tabIndex == 1&&isshow == 0">
				<u-album v-if="urls1.length > 0" multipleSize="105" :urls="urls1" keyName="url"></u-album>
				<u-empty v-else mode="car" icon="https://m.lqvvvv.com/assets/static/my/none.png" text="暂无内容"
					marginTop="30">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				tabIndex: 0,
				list: [{
						name: '视频',
					},
					// {
					// 	name: '动态',
					// }, 
					{
						name: '相册'
					}
				],
				urls1: [],
				activeStyle: {
					color: '#2E314A',
					fontSize: '36rpx',
					fontWeight: 'bold'
				},
				inactiveStyle: {
					color: '#8B8DA0',
					fontSize: '36rpx'
				},
				isshow: 0
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.showinfo()
			// #endif
			this.getuserinfo()
		},
		methods: {
			showinfo() {
				let params = {
					// #ifdef APP
					name: 'hide_status',
					// #endif
					// #ifdef MP-WEIXIN
					name: 'miniapp_hide_status'
					// #endif
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/getConfig',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.isshow = res.data
						if (this.isshow != 0) {
							this.tabIndex = 1
						}
					}
				})
			},
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.info = res.data
						if (this.info.photos != '') {
							this.urls1 = this.info.photos.split(',').map(url => ({
								url: `https://m.lqvvvv.com${url}`
							}));
						}
					} else {
						this.info = {}
					}
				})
			},
			tabHandle(e) {
				this.tabIndex = e.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit-page {
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% 400rpx;

		.replace {
			padding: 10rpx 30rpx;
			background-color: rgba(12, 12, 12, 0.13);
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #fff;
		}

		.content {
			padding: 30rpx;
			background-color: #fff;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			position: relative;

			.addition {
				position: fixed;
				right: 40rpx;
				bottom: 8%;

				image {
					width: 118rpx;
					height: 118rpx;
				}
			}

			.head {
				position: absolute;
				top: -95rpx;
				left: 50rpx;

				image {
					width: 190rpx;
					height: 190rpx;
					border-radius: 50%;
				}
			}

			.edit {
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				.edit-btn {
					width: 283rpx;
					height: 84rpx;

					border: 1rpx solid #5755f2;
					// border-image: linear-gradient(to bottom, rgba(87, 85, 242, 1), rgba(204, 123, 255, 1)) 1;
					// 这个1 加了 就不能圆角 不加渐变就出不来
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.edit-text {
						color: transparent;
						font-size: 28rpx;
						font-weight: 500;
						background-image: linear-gradient(90deg, #5755F2 0%, #CC7BFF 100%);
						background-clip: text;
					}
				}
			}

			.head-name {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.name {
					color: #000000;
					font-size: 42rpx;
					font-weight: 600;
				}

				image {
					width: 110rpx;
					height: 50rpx;
					margin-left: 20rpx;
				}
			}

			.add-blurb {
				color: #8B8DA0;
				font-size: 24rpx;
				margin-top: 20rpx;
			}

			.info-num {
				display: flex;
				margin-top: 20rpx;

				.num-item {
					font-size: 48rpx;
					color: #5755F2;
					font-size: 48rpx;
					font-weight: bold;
					margin-right: 30rpx;

					text {
						font-size: 24rpx;
						margin-left: 10rpx;
						color: #8B8DA0;
						font-weight: normal;
					}
				}
			}

			.line {
				width: 100%;
				height: 2rpx;
				background-color: #F5F5F5;
				position: absolute;
				left: 0;
				right: 0;
				margin-top: 20rpx;
			}

			.dynamic {
				padding: 20rpx 0;

				.dynamic-item {
					margin-top: 50rpx;

					.dynamic-top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.top-left {
							display: flex;
							align-items: center;

							.top-head {
								width: 80rpx;
								height: 80rpx;
								border: 4rpx solid #5755F2;
								border-radius: 50%;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.top-info {
								margin-left: 20rpx;

								.info-name {
									display: flex;
									align-items: center;

									.name {
										font-size: 32rpx;
										font-weight: bold;
										color: #000000;
									}

									.age {
										margin-left: 20rpx;
										display: flex;
										align-items: center;
										color: #999;
										font-size: 28rpx;

										image {
											width: 20rpx;
											height: 20rpx;
											margin-right: 10rpx;
										}
									}
								}

								.time {
									color: #999;
									font-size: 24rpx;
									margin-top: 10rpx;
								}
							}
						}

						image {
							width: 96rpx;
							height: 45rpx;
						}
					}

					.dynamic-msg {
						padding: 30rpx 0;

						.msg-text {
							color: #000000;
							font-size: 32rpx;
						}

						.msg-img {
							margin-top: 20rpx;

							image {
								width: 206rpx;
								height: 206rpx;
								border-radius: 20rpx;
							}
						}
					}

					.place {
						display: flex;
						align-items: center;
						color: #5755F2;
						font-size: 24rpx;

						image {
							width: 23rpx;
							height: 27rpx;
							margin-right: 10rpx;
						}
					}

					.dynamic-use {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 60rpx;

						.user-right {
							width: 35%;
							display: flex;
							justify-content: space-around;
							align-items: center;

							.user-item {
								display: flex;
								align-items: center;
								margin-right: 20rpx;
								color: #C8CBD0;
								font-size: 24rpx;

								image {
									margin-right: 10rpx;
								}
							}
						}

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}

			.video {}

			.album {
				padding-top: 20rpx;
			}
		}
	}
</style>